<template>
  <div class="bob" v-if="list.length">
    <div class="box-box1">
      <ul class="zxpm">
        <li class="zxpm1_txt">排名</li>
        <li class="zxpm1_txt" style="width:50%;text-align:left">姓名</li>
        <li v-if="rankingType == 'group'" class="zxpm1_txt">所属中心</li>
        <li class="zxpm1_txt">话务量</li>
      </ul>
      <ul class="zxpm2" v-for="(item, index) in list" :key="index">
        <li class="zxpm1">
          <img v-if="index == 0" src="../../../assets/onLineService/top1.png" alt="" style="width:.4rem;height:.4rem;margin-top:.3rem">
          <img v-else-if="index == 1" src="../../../assets/onLineService/top2.png" alt=""
            style="width:.4rem;height:.4rem;margin-top:.3rem">
          <img v-else-if="index == 2" src="../../../assets/onLineService/top3.png" alt=""
            style="width:.4rem;height:.4rem;margin-top:.3rem">
          <span v-else>{{ index + 1 }}</span>
        </li>
        <li class="zxpm1" style="width:50%; text-align:left">
          <span >{{ item.name }}</span>
        </li>
        <li class="zxpm1" v-if="rankingType == 'group'">{{ item.deptName }}</li>
        <li class="zxpm1">{{ item.answerCount }}</li>
      </ul>
      <div v-show="allList.length > '5' ? true : false">
        <div v-if="list.length < allList.length" plain type="primary"
          style="text-align:center;font-size:.26rem;padding:.2rem 0;color:#787878;" @click="more">查看更多</div>
        <div v-else plain type="primary" style="text-align:center;font-size:.26rem;padding:.2rem 0;color:#787878;"
          @click="up">收起</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Checker,
  CheckerItem,
  Divider,
  Group,
  Cell,
  Popup,
  TransferDom,
  Tab,
  TabItem
} from "vux";

export default {
  directives: {
    TransferDom
  },
  components: {
    Checker,
    CheckerItem,
    Divider,
    Group,
    Cell,
    Popup,
    Tab,
    TabItem
  },
  props: {
    formData: {},
    rankingType: {}
  },
  data() {
    return {
      allList: [],
      list: []
    };
  },
  mounted() {
    // this.getUserid();
    this.getData();
  },
  watch: {
    formData: {
      handler(val) {
        this.getData();
      },
      deep: true
    }
  },

  methods: {
    getData() {
      // console.log();
      this.allList = JSON.parse(JSON.stringify(this.formData));
      this.list = this.allList.slice(0, 5);
    },
    more() {
      this.list = this.allList;
    },
    up() {
      this.list = this.allList.slice(0, 5);
    }
  }
};
</script>

<style  scoped lang='less'>
.bob {
  width: 100%;
}

.huawutou {
  display: flex;
}

.btngd {
  width: 30%;
  height: 1rem;
  background: rgba(67, 156, 245, 1);
  border-radius: 1rem;
  text-align: center;
  line-height: 1rem;
  color: #fff;
  margin-left: 35%;
  margin-top: 8%;
  display: block;
}

.zxpm2 {
  width: 100%;
  // background: rgba(67, 156, 245, 0.18);
  border-radius: 20px;
  display: flex;
  justify-content: space-around;
}
.zxpm1_txt{font-size:0.24rem;
  width: 33%;
  text-align: center;
  line-height: .7rem;
  word-break: keep-all;
  /* 不换行 */

  white-space: nowrap;
  /* 不换行 */

  overflow: hidden;
  /* 内容超出宽度时隐藏超出部分的内容 */

  text-overflow: ellipsis;
  /*溢出时显示省略标记...；需与overflow:hidden；一起使用*/}
.zxpm1 {
  width: 33%;
  font-size: 0.26rem;
  text-align: center;
  line-height: .8rem;
  word-break: keep-all;
  /* 不换行 */

  white-space: nowrap;
  /* 不换行 */

  overflow: hidden;
  /* 内容超出宽度时隐藏超出部分的内容 */

  text-overflow: ellipsis;
  /*溢出时显示省略标记...；需与overflow:hidden；一起使用*/
}

.zxpm {
  width: 100%;
  background: #def5f7;
  color: #787878;
  display: flex;
  justify-content: space-around;
}

.yewu {
  width: 50%;
}

.box-box1 {
  width: 100%;
}

.asd {
  width: 100%;
  height: 100%;
  background: rgba(55, 56, 76, 1);
}

.demo1-item {
  border: 1px solid rgba(115, 116, 141, 1);
  padding: 5px 15px;
  color: rgba(115, 116, 141, 1);
}

.demo1-item-selected {
  border: 1px solid rgba(50, 124, 197, 1);
  color: rgba(50, 124, 197, 1);
}

.vux-tab-wrap {
  margin-top: 2%;
  width: 55%;
  height: 20%;
  border-radius: 22px;
  border-top: 1px solid rgba(110, 148, 255, 1);
  border-bottom: 1px solid rgba(110, 148, 255, 1);
  background: rgba(0, 0, 0, 0);
}

.vux-tab .vux-tab-item {
  background: rgba(55, 56, 76, 1);
}

.vux-tab {
  background: rgba(0, 0, 0, 0) !important;
}

.vux-tab-ink-bar-transition-backward {
  background: rgb(206, 180, 161);
}

.vux-tab .vux-tab-item.vux-tab-selected {
  background: rgba(67, 156, 245, 1);
}
</style>